<template>
	<view >

	<wTitleBar title="个人中心" :isReturn="showRetBtn" textColor="#fff" bgColor="none" textAlign="center"></wTitleBar>

	<view class="content">
		 <view class="header">
		 	<u-avatar :src="avatar" mode="circle" show-sex="true"  size="large"></u-avatar>
			<view class="name">
				{{nickName}}
			</view>
		 </view>
		 <view class="list">
			<view class="cont_list" @click="toMycard()">
				<image class="list_icon" src="../../static/ewm.png" mode=""></image>
				<view class="list_tit">
					我的挪车码
				</view>
				<view class="cards">
					{{cards}}张
				</view>
				<image src="../../static/right.png" mode=""></image>
			</view>
			<view class="cont_list" @click="openCamera">
				<image class="list_icon" src="../../static/bindewm.png" mode=""></image>
				<view class="list_tit">
					扫码绑定
				</view>
				<image src="../../static/right.png" mode=""></image>
			</view>
			<view class="cont_list" @click="openShop()">
				<image class="list_icon" src="../../static/buy.png" mode=""></image>
				<view class="list_tit">
					购买挪车码
				</view>
				<image src="../../static/right.png" mode=""></image>
			</view>
			<view class="cont_list" @click="openShuoming()">
				<image class="list_icon" src="../../static/sm.png" mode=""></image>
				<view class="list_tit">
					使用说明
				</view>
				<image src="../../static/right.png" mode=""></image>
			</view>
			<view class="cont_list" @click="openKf()" >
				<image class="list_icon" src="../../static/kf.png" mode=""></image>
				<view class="list_tit">
					联系客服
				</view>
				<image src="../../static/right.png" mode=""></image>
			</view>
		 </view>
	</view>

	<view class="footer">本服务由 致一网络科技工作室 提供</view>
	<u-toast ref="uToast" />
	<u-popup v-model="showLogin" mode="center" border-radius="14" length="60%">
			<view class="login_btn">
				<view class="login_tit">
					微信授权用户信息
				</view>
				<u-button @close="isLogin()" @click="loginSend()" type="success" plain>登录</u-button>
			</view>
	</u-popup>
	<u-popup @close="colseKf()" v-model="showKefu" mode="center" border-radius="14" length="60%">
			<view class="login_btn">
				<view class="login_tit">
					联系客服获取详细信息
				</view>
				<u-button open-type="contact" type="success" plain>联系客服</u-button>
			</view>
	</u-popup>
	</view>
</template>

<script>
	import wTitleBar from '../../components/w-titleBar/w-titleBar.vue'
	import plate from '../../components/plate/index.vue'
	export default {
		components: {
		            plate,wTitleBar
		        },
		data() {
			return {
				nickName:"",
				avatar:"",
				code:"",
				cards:0,
				showLogin:true,
				showKefu:false,
				retBand:false,
				showRetBtn:true
			}
		},
		onLoad(data) {
			if(getCurrentPages().length==1){
				this.showRetBtn=false;
			}
			if(data.retband){
				this.retBand=true
			}
			this.checkLogin();
			
		},
		onShow(){
			
			this.checkLogin();
		},
		methods: {
			toMycard(){
				uni.navigateTo({
					url:'../mycard/mycard'
				})
			},
			openCamera(){
				uni.scanCode({
				    onlyFromCamera: true,
				    success(res) {
						console.log(res);
						if(res.path){
							uni.navigateTo({
								url:res.path.replace('pages','..')
							})
						}
				    },
					fail(fail) {

					}
				});
			},
			loginSend(){
				uni.getUserProfile({
				  desc: '用与绑定用户',
				  success:(infoRes)=> {
					  this.nickName=infoRes.userInfo.nickName
					  this.avatar=infoRes.userInfo.avatarUrl
					  this.showLogin=false;
					  uni.showLoading({
					  	title:"登录中"
					  })
					  uni.login({
					    provider: 'weixin',
					    success: (loginRes)=> {
						uni.hideLoading();
					  	if(loginRes.code){
							 this.code=loginRes.code;
					  		 uni.request({
					  			url:this.$config.baseApi+'user/login',
					  			data:this.$data,
					  			method:'POST',
								dataType:'json',
					  			success: (res) => {
									const userData=res.data;
					  				if(userData.code){
										uni.setStorageSync("openid",userData.data.openid);
										this.$refs.uToast.show({
					  						title: userData.msg,
					  						type: 'success'
					  					})
										if(this.retBand){
											uni.navigateBack()
										}
					  				}else{
					  					this.$refs.uToast.show({
					  						title: userData.msg,
					  						type: 'error'
					  				    })
					  				}
					  			}
					  		})
					  	}
					  	
					    }
					  });
					 
				  },
				  fail: (failData) => {
				  	if(failData){
						this.showLogin=false;
						this.$refs.uToast.show({
							title: '获取用户信息才可以继续服务',
							type: 'error'
						})
						setTimeout(()=>{
							this.showLogin=true
						},2000)
					}
				  }
				})	
			},
			isLogin(){
				const openid=uni.getStorageSync('openid');
				if(!openid){
					this.showLogin=true;
				}
			},
			checkLogin(){
				const openid=uni.getStorageSync('openid');
				if(openid){
					this.showLogin=false;
					uni.request({
						url:this.$config.baseApi+'user/getuserinfo',
						data:{openid},
						method:'POST',
						dataType:'json',
						success: (res) => {
							const userData=res.data;
							if(userData.code){
								uni.setStorageSync("openid",userData.data.openid);
								this.nickName=userData.data.nickname
								this.avatar=userData.data.avatar
								this.cards=userData.data.cards
							}
						}
					})
					return;
				}
			},
			colseKf(){
				this.showKefu=false
			},
			openKf(){
				this.showKefu=true
				
			},
			openShop(){
				uni.navigateToMiniProgram({
					appId:'wxc3aba56cfbd06fd1'
				})
			},
			openShuoming(){
				uni.navigateTo({
					url:'../shuoming/shuoming'
				})
			}
		}
	}
</script>

<style>
	page{
		background: -webkit-linear-gradient(top,rgb(4 181 244),#56f5df,white);
	}
	.content{
		width: 100%;
	}
	.header{
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 20vh;
	}
	.header .name{
		margin-top: 20rpx;
		font-size: 40rpx;
		color: white;
	}
	.list{
		width: 90%;
		margin: auto;
		background-color: white;
		border-radius: 20px;
		padding-top: 30rpx;
		padding-bottom: 60rpx;
	}
	.cont_list{
		display: flex;
		padding: 30rpx;
	}
	.cont_list .list_tit{
		flex: 1;
	}
	.cont_list .list_icon{
		margin-right: 20rpx;
	}
	.cont_list image{
		width: 40rpx;
		height: 40rpx;
		float: right;
	}
	.login_btn{
		width: 100%;
		margin: auto;
		padding: 10rpx;
	}
	.login_tit{
		text-align: center;
		padding: 20rpx;
		margin-bottom: 40rpx;
		font-size: 34rpx;
	}
	.cards{
		color: #666;
	}
	.footer{
		width: 100%;
		position: fixed;
		bottom: 10rpx;
		color: #607D8B;
		text-align: center;
	}
</style>
